{include file="public/head"/}

<script language="javascript">
	$(document).ready(function () {
		$("[data-toggle='tooltip']").tooltip();

		//设置modal垂直居中,移动
		modalSetting(".modal"); 
	});
</script>
<div id="main">
<div class="container-fluid">
	<input type="hidden" id="sale_id" value="{$sale_id|default=0}">
	<input type="hidden" id="viewType" value="{$viewType|default=0}">
	<input type="hidden" id="deliveryNoteId" value="{$deliveryNoteId|default=0}">
    <div class="row clearfix">
        <div class="col-md-12 column" id="mainList">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <p></p>
            </div>
        </div>
    </div>
   
    <div class="ntDesktop">
    	<div class="ntDesktop-head">{$title}</div>
		<div class="row">
			<div class="col-md-12 text-right">
				<a :href="'/admin/sale/list'" class="btn btn-primary" style="margin-bottom: 0.5rem">
					<span class="fa fa-arrow-left"></span> 返回列表
				</a>
				<button class="btn btn-primary" style="margin-bottom: 0.5rem" @click="saveFun()" v-if=" (deliveryNote != undefined && deliveryNote.detail.length > 0) || viewType == 'edit'">保存送货单</button>
			</div>
		</div>
    	<div class="row">
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						订单内容
					</div>
					<table class="table table-hover ntTable">
						<tbody>
							<tr>
								<td>{{ formatUnit(sale_id,'id') }}
									<span class="label label-primary pull-right">{{saleData.priority}}</span>
								</td>
							</tr>
							<tr>
								<td>
									{{saleData.company_name}}
									<template v-if="saleData.branch_name"><br>({{saleData.branch_name}})</template>
								</td>
							</tr>
							<tr>
								<td align="right">
									<a :href="'/admin/sale/saleEdit?id='+sale_id+'&tab=delivery'" class="btn btn-sm btn-default">送货单列表</a>
								</td>
							</tr>
						</tbody>
					</table>
					<table class="table table-hover">
						<thead>
							<tr>
								<th>No.</th>
								<th>产品</th>
								<th>数量</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
    						<template v-if=" saleData != undefined && saleData.detail.length > 0">
								<tr v-for="(detailItem,detailIndex) in saleData.detail">
									<td align="center">{{detailIndex+1}}</td>
									<td>
										<div class="pro">
											<div class="pro-icon">
												<img :src="detailItem.proInfo.img_url" border="0" width="48px" height="48px">
											</div>
											<div class="pro-name">
												<small>{{ formatUnit(detailItem.proInfo.prochar_id,'id') + (detailItem.proInfo.brand_name ? ' / ' + detailItem.proInfo.brand_name : '') + (detailItem.proInfo.model ? ' / ' + detailItem.proInfo.model : '') }}</small> <br />{{detailItem.proInfo.pro_name}}
											</div>
										</div>
									</td>
									<td align="right">
										{{formatUnit(detailItem.qty,'PCS')}}<br>
										<span class="blue" :id="'saleDataQty'+detailIndex">{{formatUnit( (detailItem.qty-detailItem.undone_qty),'PCS')}}</span> / 
										<span class="green">{{formatUnit(detailItem.undone_qty,'PCS')}}</span>
									</td>
									<td align="right">
										<button class="btn btn-default" @click="addQty(detailIndex)" v-if="detailItem.undone_qty > 0">添加</button>
									</td>
								</tr>
							</template>
							<template v-else>
								<tr style="text-align: center;">
	                                <td colspan="4" class="no_date" style="line-height: 10rem">{:lang('no_data')} </td>
	                            </tr>
							</template>
						</tbody>
					</table>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">
						送货单内容
					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-1">
								<span class="lh-3">分公司</span>
							</div>
							<div class="col-md-8">
								<select name="" id="" class="form-control" v-model="deliveryNote.co_branch_id">
									<template v-if="branchCompany.length > 0"> 
										<option value="0" >请选择...</option>
										<option value="branchCompanyItem.id" v-for="(branchCompanyItem,branchCompanyIndex) in branchCompany">{{branchCompanyItem.name}}</option>
									</template>
									<template v-else>
										<option value="0" >{:lang('no_data')}</option>
									</template>
								</select>
							</div>
							<div class="col-md-3 text-right">
								<button class="btn btn-sm btn-primary" style="margin-top:-4px" data-toggle="modal" data-target="#remark_editModal" @click="addRemark(-1)">送货备注</button>
							</div>
						</div>
					</div>

					<table class="table table-hover">
						<thead>
							<tr>
								<th>No.</th>
								<th width="50%">产品</th>
								<th>箱规</th>
								<th>数量</th>
								<th>备注</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
    						<template v-if=" deliveryNote != undefined && deliveryNote.detail.length > 0">
								<tr v-for="(detailItem,detailIndex) in deliveryNote.detail">
									<td align="center">{{formatUnit(detailIndex+1,'id')}}</td>
									<td>
										<div class="pro">
											<div class="pro-icon">
												<img :src="detailItem.proInfo.img_url" border="0" width="48px" height="48px">
											</div>
											<div class="pro-name">
												<small>{{ formatUnit(detailItem.proInfo.prochar_id,'id') + (detailItem.proInfo.brand_name ? ' / ' + detailItem.proInfo.brand_name : '') + (detailItem.proInfo.model ? ' / ' + detailItem.proInfo.model : '') }}</small> <br />{{detailItem.proInfo.pro_name}}
											</div>
										</div>
									</td>
									<td align="right">
										{{formatUnit(detailItem.proInfo.prochar_qty,'PCS')}}<small class="unit">PCS/CTN</small><br>
										{{detailItem.proInfo.ctn_size}}<small class="unit">CM</small>
									</td>
									<td>
										<input type="number" class="form-control text-right" v-model="detailItem.qty" id="saleDataQty" style="width:12rem" >
									</td>
									<td>
										<button class="btn btn-sm btn-default" data-toggle="popover" title="备注"  @mouseover="setpopper" :id="'setpopper'+detailIndex">
											备注
											<div class="content" style="display: none;">
												<div style="width:25vw">
													<div>{{detailItem.remark}}</div>
												</div>
											</div>
										</button>
									</td>
									<td align="right">
										<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#remark_editModal" @click="addRemark(detailIndex)">备注</button>
										<button class="btn btn-sm btn-primary" @click="delData(detailIndex,detailItem.id)">删除</button>
									</td>
								</tr>
							</template>
							<template v-else>
								<tr style="text-align: center;">
	                                <td colspan="6" class="no_date" style="line-height: 10rem">{:lang('no_data')} </td>
	                            </tr>
							</template>
						</tbody>
					</table>
				</div>
			</div>
		</div>
    </div>
</div>

<div class="modal fade" id="remark_editModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width:40vw">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{remarkTitle}}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            <p></p>
                        </div>
                    </div>
                </div>

				<textarea name="" id="remarkText" style="height: 20vh" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>取消</button>
                <button type="button" class="btn btn-primary" style="padding-left:24px;padding-right:24px"  @click="addRemark(remarkType,'add')"><span class="glyphicon glyphicon-floppy-disk"></span>保存</button>
            </div>
        </div>
    </div>
</div>
</div>
{include file="public/foot"/}
<script src="/static/Admin/js/saledeliverynote.js"></script>
